<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商户管理</el-breadcrumb-item>
            <el-breadcrumb-item>审核列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="nameValue" placeholder="要查询的商户名" clearable></el-input>
                    </el-col>
                    <el-button size="small" @click="getUserList(1,nameValue)">查询</el-button>
                </div>
            </div>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="userList" style="width: 100%" stripe border>
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="shrink-box">
                                <el-form-item label="商户ID">
                                    <span>{{ props.row.id }}</span>
                                </el-form-item>
                                <el-form-item label="商户号">
                                    <span>{{ props.row.merchant }}</span>
                                </el-form-item>
                                <el-form-item label="用户全称">
                                    <span>{{ props.row.user_name }}</span>
                                </el-form-item>
                                <el-form-item label="用户简称">
                                    <span>{{ props.row.nick_name }}</span>
                                </el-form-item>
                                <el-form-item label="商户类型">
                                    <span v-if="props.row.merchant_type==1">企业商户</span>
                                    <span v-else-if="props.row.merchant_type==2">事业单位商户</span>
                                    <span v-else-if="props.row.merchant_type==3">个体工商户</span>
                                    <span v-else-if="props.row.merchant_type==4">个人商户（小微商户）</span>
                                    <span v-else-if="props.row.merchant_type==5">自然人</span>
                                    <span v-else-if="props.row.merchant_type==6">其他组织</span>
                                    <span v-else>未知</span>
                                </el-form-item>
                                <el-form-item label="法人证件类型">
                                    <span v-if="props.row.cert_type==1">身份证</span>
                                    <span v-else>未知</span>
                                </el-form-item>
                                <el-form-item label="法人名字">
                                    <span>{{ props.row.legal_person }}</span>
                                </el-form-item>
                                <el-form-item label="法人身份证号">
                                    <span>{{ props.row.legal_person_id }}</span>
                                </el-form-item>
                                <el-form-item label="性别">
                                    <span v-if="props.row.gender==1">男</span>
                                    <span v-else-if="props.row.gender==2">女</span>
                                    <span v-else>未知</span>
                                </el-form-item>
                                <el-form-item label="邮箱">
                                    <span>{{ props.row.email }}</span>
                                </el-form-item>
                                <el-form-item label="联系电话">
                                    <span>{{ props.row.mobile }}</span>
                                </el-form-item>
                                <el-form-item label="固定电话">
                                    <span>{{ props.row.tel }}</span>
                                </el-form-item>
                                <el-form-item label="联系地址">
                                    <span>{{ props.row.address }}</span>
                                </el-form-item>
                                <el-form-item label="联系人姓名">
                                    <span>{{ props.row.linkman }}</span>
                                </el-form-item>
                                <el-form-item label="联系人电话">
                                    <span>{{ props.row.link_phone }}</span>
                                </el-form-item>
                                <el-form-item label="结算卡联行号">
                                    <span>{{ props.row.bank_code }}</span>
                                </el-form-item>
                                <el-form-item label="开户名">
                                    <span>{{ props.row.account_name }}</span>
                                </el-form-item>
                                <el-form-item label="开户账号">
                                    <span>{{ props.row.account_no }}</span>
                                </el-form-item>
                                <el-form-item label="结算卡类型">
                                    <span v-if="props.row.settle_bank_type==1">对公</span>
                                    <span v-else-if="props.row.settle_bank_type==2">对私</span>
                                </el-form-item>
                                <el-form-item label="经营类别">
                                    <span>{{ props.row.merchant_category }}</span>
                                </el-form-item>
                                <el-form-item label="行业类型编码">
                                    <span>{{ props.row.industry_type_code }}</span>
                                </el-form-item>

                                <el-form-item label="法人身份证开始日期">
                                    <span>{{ props.row.id_card_start_date }}</span>
                                </el-form-item>
                                <el-form-item label="法人身份证开始日期">
                                    <span>{{ props.row.id_card_end_date }}</span>
                                </el-form-item>
                                <el-form-item label="组织机构代码">
                                    <span>{{ props.row.org_num }}</span>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <span v-if="props.row.status==0">待审</span>
                                    <span v-else-if="props.row.status==1">成功</span>
                                    <span v-else>失败</span>
                                </el-form-item>
                                <el-form-item label="审核意见">
                                    <span>{{ props.row.org_num }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" type="selection" width="50"></el-table-column>
                    <el-table-column align="center" prop="id" label="UID" width="60"></el-table-column>
                    <el-table-column align="center" prop="merchant" label="商户号"></el-table-column>
                    <el-table-column align="center" prop="link_phone" label="联系电话"></el-table-column>
                    <el-table-column align="center" prop="bank_code" label="结算卡联行号"></el-table-column>
                    <el-table-column align="center" prop="account_name" label="开户名"></el-table-column>
                    <el-table-column align="center" prop="status" label="状态" width="70">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status==0" type="info" size="mini">待审</el-tag>
                            <el-tag v-else-if="scope.row.status==1" type="success" size="mini">成功</el-tag>
                            <el-tag v-else type="danger" size="mini">失败</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="opinion" label="审核意见"></el-table-column>
                    <el-table-column align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="showAuditDialog(scope.row.id,scope.row.user_name)">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="whole-pagination">
                    <el-pagination :page-size="size" background layout="prev, pager, next" :total="count" @current-change="currentPage"></el-pagination>
                </div>
                <el-dialog title="审核反馈" :visible.sync="AuditDialogVisible" width="500px" :before-close="handleClose">
                    <div>
                        <el-form ref="auditFromRef" :model="auditFrom" label-width="150px">
                            <el-form-item label="用户全称：">
                                <!-- <el-input v-model="auditFrom.user_name"></el-input> -->
                                <span>{{auditFrom.user_name}}</span>
                            </el-form-item>
                            <el-form-item label="审核结果：">
                                <el-radio-group v-model="auditFrom.status">
                                    <el-radio :label="1">审核通过</el-radio>
                                    <el-radio :label="2">审核失败</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="审核意见：" v-if="auditFrom.status==2">
                                <el-input type="textarea" v-model="auditFrom.opinion"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="AuditDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="auditSetStatus(auditFrom)">确 定</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="图片资料" :visible.sync="ImgDialogVisible" width="900px" :before-close="handleClose">
                    <div class="imgs-con">
                        <div v-if="imgList.length>0">
                            <div class="card" v-for="item in imgList" :key="item.id">
                                <p>{{item.imgName}}</p>
                                <img style="width:200px;height:200px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599821146465&di=685ed9198118dcedf79cbf9011c46bb0&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" alt />
                            </div>
                        </div>
                        <div v-else>该商户没有图片资料</div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="ImgDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="ImgDialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userList: [],
            count: 0,
            size: 10,
            page: 1,
            ImgDialogVisible: false,
            imgList: [],
            statusValue: "",
            nameValue: "",
            // 审核弹框显隐
            AuditDialogVisible:false,
            // 审核表单
            auditFrom: {},

        };
    },
    created() {
        this.getUserList(1);
    },
    methods: {
        clearFilter() {
            this.$refs.myTable.clearFilter();
            this.nameValue = "";
            this.getUserList(1);
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => { });
        },

        // 获取审核列表
        getUserList(page, name) {
            let _this = this;
            this.$axios({
                url: "/admin/general/userList",
                data: {
                    status: 0,
                    name: name !== undefined ? name : '',
                    offset: page,
                    limit: this.size,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.userList = res.data.content.user;
                        _this.count = Number(res.data.content.count);
                    }
                },
            });
        },
        currentPage(page) {
            let _this = this;
            _this.getUserList(page, _this.nameValue);
        },
        showAuditDialog(id, name) {
            this.AuditDialogVisible = true;
            this.auditFrom.userID = id;
            this.auditFrom.user_name = name;
        },
        auditSetStatus(from) {
            let _this = this;
            if (from.status == undefined) {
                this.$message({
                    type: "error",
                    message: "请选择审核结果",
                });
                return;
            }
            if (from.status == 2 && from.opinion == undefined) {
                this.$message({
                    type: "error",
                    message: "审核失败请填写失败意见",
                });
                return;
            }
            this.$axios({
                url: "/admin/master/userAudit",
                data: {
                    userID: from.userID,
                    status: from.status,
                    opinion: from.status==1? "审核成功" : from.opinion,
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.$message({
                            type: "success",
                            message: "审核完成",
                        });
                        _this.$refs['auditFromRef'].resetFields();
                        _this.AuditDialogVisible = false;
                        _this.getUserList(_this.page);
                    }
                },
            });
        },
    },
};
</script>
<style scoped>
.shrink-box {
    width: 100%;
    font-size: 0;
}
.shrink-box >>> label {
    width: 140px;
    color: #99a9bf;
}
.shrink-box .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.333333%;
}
.a {
    vertical-align: middle;
}
.imgs-con {
    height: 450px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
}
.imgs-con > .card {
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
}
.imgs-con > .card:nth-child(4n) {
    margin-right: 0;
}
</style>